<template>
  <div class="source-main">
    <div class="item-top-box">
      <div class="item-top-box-title"></div>
      <div class="detail-btn">详情<i class="el-icon-caret-right"></i></div>
    </div>
    <div class="item-center">
      <dv-border-box-7 :color="['#0054A3', '#2BCCFF']">
        <div id="source-main-echarts"></div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

// 案件来源
export default {
  name: 'Source',
  data() {
    return {
      //
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('source-main-echarts'));
    let ydata = [
      {
        name: '主动调解',
        value: 18
      },
      {
        name: '依申请调解',
        value: 16
      },
      {
        name: '接受委托移送调解',
        value: 15
      },
      {
        name: '地方政府委托移送',
        value: 14
      },
      {
        name: '法院委托移送',
        value: 10
      },
      {
        name: '公安机关委托移送',
        value: 7.9
      },
      {
        name: '信访部委托移送',
        value: 6.7
      }
    ];
    let color = [
      '#8d7fec',
      '#5085f2',
      '#e75fc3',
      '#f87be2',
      '#f2719a',
      '#fca4bb',
      '#f59a8f',
      '#fdb301',
      '#57e7ec',
      '#cf9ef1'
    ];
    let xdata = [
      '主动调解',
      '依申请调解',
      '接受委托移送调解',
      '地方政府委托移送',
      '法院委托移送',
      '公安机关委托移送',
      '信访部委托移送'
    ];

    let option = {
      // backgroundColor: 'rgba(255,255,255,1)',
      color: color,
      legend: {
        orient: 'vartical',
        x: 'left',
        top: 'center',
        left: '60%',
        bottom: '0%',
        data: xdata,
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 16,
        textStyle: {
          color: '#FFFFFF'
          // fontFamily: 'BBT'
        },
        // formatter:function(name){
        //   var oa = option.series[0].data;
        //   var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
        //   for(var i = 0; i < option.series[0].data.length; i++){
        //         if(name==oa[i].name){
        //           return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
        //         }
        //   }
        // },
        formatter: function (name) {
          return '' + name;
        }
      },
      series: [
        {
          type: 'pie',
          clockwise: false, // 饼图的扇区是否是顺时针排布
          hoverAnimation: true,
          minAngle: 2, // 最小的扇区角度（0 ~ 360）
          radius: ['40%', '70%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          // itemStyle: {
          //   //图形样式
          //   // normal: {
          //   //   borderColor: '#ffffff',
          //   //   borderWidth: 6
          //   // }
          // },
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              formatter: function (params, ticket, callback) {
                var name = params.data.name;
                var arr = name.split(':');
                var percent = params.percent;
                var str = percent + '%' + '\n' + arr[0];
                return str;
              },
              textStyle: {
                fontSize: '15',
                fontWeight: 'V07',
                color: '#fff'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: ydata
        },
        {
          name: '刻度1',
          center: ['30%', '50%'], // 默认全局居中
          type: 'gauge',
          radius: '100%',
          min: 0, //最小刻度
          max: 100, //最大刻度
          splitNumber: 10, //刻度数量
          startAngle: 225,
          endAngle: -135,
          axisLine: {
            show: true,
            lineStyle: {
              width: 0,
              color: [[1, '#0096E5']]
            }
          },
          //仪表盘轴线
          // axisLabel: {
          //   show: true,
          //   color: '#0096E5',
          //   distance: 25,
          //   formatter: function (v) {
          //     switch (v + '') {
          //       case '0':
          //         return '0';
          //       case '10':
          //         return '10';
          //       case '20':
          //         return '20';
          //       case '30':
          //         return '30';
          //       case '40':
          //         return '40';
          //       case '50':
          //         return '50';
          //       case '60':
          //         return '60';
          //       case '70':
          //         return '70';
          //       case '80':
          //         return '80';
          //       case '90':
          //         return '90';
          //       case '100':
          //         return '100';
          //       case '110':
          //         return '110';
          //       case '120':
          //         return '120';
          //     }
          //   }
          // }, //刻度标签。
          axisTick: {
            show: true,
            splitNumber: 7,
            lineStyle: {
              color: '#0096E5', //用颜色渐变函数不起作用
              width: 1
            }
            // length: -8
          } //刻度样式
          // splitLine: {
          //   show: true,
          //   length: -20,
          //   lineStyle: {
          //     color: '#0096E5' //用颜色渐变函数不起作用
          //   }
          // }, //分隔线样式
          // detail: {
          //   show: false
          // },
          // pointer: {
          //   show: false
          // }
        }
      ]
    };
    myChart.setOption(option);
    var i = 0;
    myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i }); //设置默认选中高亮部分
    setInterval(function () {
      i++;
      if (i == 7) {
        i = 0;
      }
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: i == 0 ? 6 : i - 1
      });
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: i == 7 ? 0 : i
      }); //设置默认选中高亮部分
    }, 1000);
  }
};
</script>

<style lang="less" scoped>
.source-main {
  height: 86%;
  width: 90%;
  padding: 0px 20px 20px 20px;
}
.source-main .item-top-box {
  display: flex;
  flex-direction: row;
  position: relative;
}
.source-main .item-top-box-title {
  background-image: url('~@/assets/title6.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  height: 32px;
  width: 100%;
}
/* 详情 */
.source-main .item-top-box .detail-btn {
  font-size: 16px;
  font-family: BBT;
  font-weight: normal;
  color: #2bccff;
  position: absolute;
  right: 0;
  cursor: pointer;
}
/* 内容区域 */
.source-main .item-center {
  height: 90%;
  width: 100%;
  padding: 5px 0px;
}
#source-main-echarts {
  height: 100%;
  width: 100%;
}
</style>
